<template>
  <div class="baseDatilebox" @click="handleClick">
    <div class="box-item">
      <div class="box-item-header">
        <div class="item-left">
          <a-tooltip placement="topRight" overlayClassName="bgc_tooltip1">
            <template slot="title">
              <span>{{ itemData.title }}</span>
            </template>
            <span class="box-card-title">{{ itemData.title }}</span>
          </a-tooltip>
        </div>
        <div :class="{ 'item-right': true, primary: isPrimary }">
          {{ isPrimary ? '主表' : '附表' }}
        </div>
        <a-icon type="close" class="close" @click="handleDelete" />
      </div>
      <div class="box-item-content">
        <p>
          共抽取<span class="item-content-b">{{ itemData.gatherTimes }}</span
          >次
        </p>
        <p>
          共<span class="item-content-b">{{ itemData.gatherNum }}</span
          >条数据
        </p>
        <p>
          最后抽取时间：<span class="item-content-b">{{ itemData.lastGatherTime | updateTime }}</span>
        </p>
      </div>
      <div class="item-footer">
        <a-button class="item-search-data" @click.stop="StructureCheck">
          检查结构
        </a-button>
        <a-button class="item-search-data" @click.stop="DataCheck">
          数据查询
        </a-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BaseDatilebox',
  props: {
    itemData: {
      type: Object,
      default: {}
    },
    isPrimary: {
      type: Boolean,
      default: false
    }
  },
  filters: {
    updateTime(time) {
      return time.split(' ')[0]
    }
  },
  methods: {
    StructureCheck() {
      let { tableName, title } = this.itemData
      this.$emit('StructureCheck', tableName, title)
    },
    DataCheck() {
      let { tableName, title } = this.itemData
      this.$emit('DataCheck', tableName)
    },
    // 删除操作
    handleDelete() {
      this.$emit('Delete', this.isPrimary, this.itemData.key)
    },
    handleClick() {
      let { tableName, title } = this.itemData
      this.$emit('TreeCheck', tableName)
    }
  }
}
</script>

<style lang="less">
.bgc_tooltip1 {
  .ant-tooltip-inner {
    color: #3771b7f8;
    font-weight: 700;
    background-color: rgba(255, 255, 255, 0.85) !important;
  }
  .ant-tooltip-arrow::before {
    // 这里是小三角形
    background-color: #fff !important;
  }
}
</style>
<style lang="less" scoped>
.baseDatilebox {
  width: 100%;
  height: 100%;
  box-shadow: 2px 2px 5px #3771b7f8;
  border: 2px dashed #3771b7f8;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 10px 0px;
  cursor: pointer;
  .box-item {
    width: 100%;
    .box-item-header {
      display: flex;
      justify-content: space-between;
      width: 100%;
      position: relative;
      .item-left {
        width: 78%;
        overflow: hidden;
        .box-card-title {
          padding: 1px 2px;
          cursor: pointer;
          white-space: nowrap;
          text-align: left;
          font-weight: 700;
          font-size: 16px;
          color: white;
          background-color: #3c57a6;
          text-overflow: ellipsis;
          display: inline-block;
          width: 78%;
          overflow: hidden;
        }
      }
      //   主表附表标记
      .item-right {
        position: absolute;
        right: 10px;
        top: -12px;
        width: 13%;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        background-color: #3c58a8;

        &::after {
          content: '';
          display: block;
          position: absolute;
          top: 91%;
          left: 0px;
          right: 0px;
          border: 12px solid #3c58a8;
          border-bottom-width: 9px;
          border-bottom-color: #fff;
        }
      }
      .primary {
        background-color: #ef9325;
        &::after {
          border: 12px solid #ef9325;
          border-bottom-color: #fff;
        }
      }

      //  删除标志
      .close {
        position: absolute;
        right: -1px;
        top: -10px;
        font-size: 10px;
        border: 1px solid #a7a4a4;
        display: none;
        border-radius: 50%;
        color: #a7a4a4;
        cursor: pointer;
      }
      .close:hover {
        color: #838282;
        border: 1px solid #838282;
      }
    }
  }
  .box-item-content {
    width: 95%;
    p {
      margin-left: 9px;
      margin-top: 8px;
      margin-bottom: 8px;
      span {
        font-weight: 700;
      }
    }
    .box-card-subtitle {
      display: inline-block;
      width: 115px;
      cursor: pointer;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis; /*超出部分用...代替*/
      vertical-align: bottom;
    }
    .item-content-b {
      color: #2e4cba;
    }
  }
  .item-footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    .item-search-data {
      width: 45%;
      border: 1px solid #3771b7f8;
      color: #3771b7f8;
      margin-top: 10px;
    }
  }
}
.baseDatilebox:hover {
  box-shadow: 2px 2px 5px #ef9325;
  border: 2px dashed #ef9325;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  .box-item-header {
    .item-left {
      .box-card-title {
        background-color: #ef9325;
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      }
    }
    .item-right {
      background-color: #ef9325;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      &::after {
        border-color: #ef9325;
        border-bottom-color: #fff;
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      }
    }
    .close {
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      display: inline-block;
    }
  }

  .item-content-b {
    color: #ef9325;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  /deep/ .ant-btn:hover {
    border-color: #ef9325;
  }
}
</style>
